<!--
 * @Author: windys
 * @Description: 商品列表
 * @Date: 2022-03-22 15:48:11
-->
<template>
  <div>
    <van-nav-bar
      left-text="返回"
      fixed
      left-arrow
      @click-left="handleLeftClick"
    />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load"
      class="mall_container"
    >
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="item in list" :key="item.goodsId">
          <div class="item" @click="handleClick(item)">
            <van-image class="cover" :src="item.coverUrl" fit="contain" />
            <div class="name">{{ item.name }}</div>
            <div class="footer">
              <span> {{ item.score }}积分</span>
              <i>+{{ item.sellPrice }}元</i>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  nextTick,
  onMounted,
  toRaw,
  toRefs,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import { ApiGetMallList } from "../../../api/mall";
export default defineComponent({
  setup() {
    const router = useRouter();
    const handleLeftClick = () => {
      router.push("/mall");
    };

    const list = ref([]);
    const finished = ref(false);
    const loading = ref(false);
    const query = reactive({
      pageIndex: 0,
      pageSize: 10,
      type: 1,
    });
    const load = async () => {
      query.pageIndex++;
      const res = await ApiGetMallList(query);
      if (res) {
        list.value = list.value.concat(res);
        loading.value = false;
        if (res.length <= 0) {
          finished.value = true;
        } else {
          finished.value = false;
        }
      }
    };

    const handleClick = (item) => {
      router.push({
        path: "/mallDetail",
        query: {
          id: item.goodsId,
          item: JSON.stringify(item),
        },
      });
    };
    return {
      list,
      loading,
      finished,
      loading,
      load,
      handleLeftClick,
      handleClick,
    };
  },
});
</script>
<style scoped lang='scss'>
.mall_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
  justify-content: center;
  .item {
    border: 1px solid #ece7e7;
    height: 200px;
    border-radius: 5px;
    width: 100%;
    .cover {
      width: 100%;
      height: 100px;
      padding: 2px 0;
    }
    .name {
      font-size: 14px;
      padding: 2px 5px;
      height: 52px;
      overflow: hidden;
      color: #414650;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .footer {
      font-size: 20px;
      padding: 2px 5px;
      span {
        color: #ebb70e;
      }
      i {
        margin-left: 5px;
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>